<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
	</head>
	<body>
		<div id="container"></div>
		<!--<script type="text/babel">
			var TestClickComponent = React.createClass({
				handleClick:function(event){
					var tipE = ReactDOM.findDOMNode(this.refs.tip);
					if(tipE.style.display == "none"){
						tipE.style.display = "inline";
					}else{
						tipE.style.display = "none";
					}
					event.stopPropagation();
					event.preventDefault();
				},
				render:function(){
					return(
						<div>
							<button onClick={this.handleClick}>显示||隐藏</button><span ref="tip">测试点击</span>
						</div>
					);
				}	
			})
			var TestInputComponent = React.createClass({
				getInitialState:function(){
					return{
						inputContent:''
					}
				},
				changeHanlder:function(event){
					this.setState({
						inputContent:event.target.value
					});
				},
				render: function(){
					return(
						<div>
							<input type="text" onChange={this.changeHanlder}/><span>{this.state.inputContent}</span>
						</div>
					)
				}
			});
			ReactDOM.render(
				<div>
					<TestClickComponent/>
					<TestInputComponent/>
				</div>,
				document.getElementById('container')
			);		
		</script>-->
		<div id="example"></div>
		<!--<script type="text/babel">
			var LikeButton = React.createClass({
			  getInitialState: function() {
			    return {liked: false};
			  },
			  handleClick: function(event) {
			    this.setState({liked: !this.state.liked});
			  },
			  render: function() {
			    var text = this.state.liked ? 'like' : 'haven\'t liked';
			    return (
			      <p onClick={this.handleClick}>
			        You {text} this. Click to toggle.
			      </p>
			    );
			  }
			});
			
			ReactDOM.render(
			  <LikeButton />,
			  document.getElementById('example')
			);
		</script>-->
		<!--<script type="text/babel">-->
		<!--这里下面的React不需要加DOM
			不过这里有几点需要注意：

			1）获取属性的值用的是this.props.属性名

			2）创建的组件名称首字母必须大写。
			
			3）为元素添加css的class时，要用className。
			
			4）组件的style属性的设置方式也值得注意，要写成style={{width: this.state.witdh}}。
		-->
			<!--var Haha = React.createClass({
				render:function(){
					return <h1>Hello {this.props.name}!</h1>
				}
			});
			//新版本下面的React后面需要加DOM
			ReactDOM.render(
				<Haha name="zhaishaochuan" />,
				document.getElementById('example')
			);
		</script>-->
		<script type="text/babel">
		var InputState = React.createClass({
			getInitialState:function(){
				return {enable:false};
			},
			handleClick:function(event){
				this.setState({enable:!this.state.enable});
			},
			render:function(){
				return(
					<p>
						<input type="text" disabled={this.state.enable}/>
						<button onClick={this.handleClick}>change haha</button>
					</p>
				)
			}
		});
			ReactDOM.render(
				<InputState />,
				document.getElementById('example')
			);
			// <!--这里值得注意的几点如下：

			// 1）getInitialState函数必须有返回值，可以是NULL或者一个对象。
			
			// 2）访问state的方法是this.state.属性名。
			
			// 3）变量用{}包裹，不需要再加双引号。-->
		</script>
	</body>
</html>
